<template>

<q-card style="width: 60%;max-width: inherit;" square class="q-pb-md">
          <q-card-section class="row items-center" style="padding-bottom: 0px;">
            <div class="text-h6">任务添加</div>
            <q-space />
            <q-btn icon="close" flat round dense v-close-popup />
          </q-card-section>
          <form
            ref="addDataForm"
            @submit.prevent.stop="onSubmit"
            @reset.prevent.stop="onReset"
          >
            <q-card-section class="row justify-center ">
              <div class="col-sm-12 col-xs-12 q-gutter-md">
                <q-input
                  class="q-pb-none"
                  ref="title"
                  label="标题"
                  placeholder="请输入"
                  outlined
                  v-model="waitEdit.title"
                  dense
                  square
                  clearable
                  :rules="[
                    (val) => (val && val.length > 0) || '请输入标题'
                  ]"
                >
                </q-input>
                                          
               <q-select class="q-pb-none q-pt-sm" outlined v-model="waitEdit.kindtype" :options="options" label="新增类型"   
                  placeholder="请输入"
                  ref="kindtype"
                  dense
                  square
                  clearable 
                  :rules="[
                    (val) => (val && val.length > 0) || '请选择新增类型'
                  ]"                
                />
                
              <div class="row">
                  <div class="col-12 row" style="font-size: 14px;color: #606266;padding-left: 12px;">产品图片</div>
               <div class="col-12 row ">
                  <span class="q-pb-md block block">
                    <input type="file" style="display: none" class="mdFile" accept="image/*" @change="handleFile_md">
                    <q-btn
                      unelevated
                      color="primary"
                      label="点击上传"
                      icon="unarchive"
                      @click="MdFileUpload"
                    />
                  </span> 
                 <div slot="tip" class="el-upload__tip" style="font-size: 12px;color: #606266;padding-top: 8px;">
                   只能上传jpg/png文件，最多允许添加3张图片，建议图片比例：<span>900*400</span>
                  </div>
               </div>                     
              <div class="col-md-12 col-sm-12 col-12" style="border: 1px solid #bdbdbd;">
                  <div class="q-pa-md" style="min-height: 200px;">
                    <div class="q-col-gutter-md row items-start">  
                    <div class="col-2"  v-for="(item,index) in mdfileList " :key="index">
                      <q-img
                         :src='item'                   
                         style="    border: 1px solid #eee;"
                         img-class="my-custom-image"
                         class="rounded-borders"
                       >
                         <div class="absolute-bottom text-subtitle1 text-center" @click="delete_mdimg(item)" style="padding: 2px;cursor: pointer;">                      
                         <q-icon name="fa fa-trash " style="font-size: 16px;"/>
                         </div>
                      </q-img> 
                    </div>                                       
                  </div>
               </div>                                  
              </div>
              </div>

                <q-input
                  label="产品描述"
                  type="textarea"
                  ref="desc"
                  outlined
                  placeholder="请输入最少五个字符"
                  v-model="waitEdit.desc"
                  square
                >
                </q-input>

                <div class="text-right">
                  <q-btn
                    outline
                    unelevated
                    label="取消"
                    v-close-popup
                    type="reset"
                    class="q-mr-sm no-border-radius"
                    color="grey-6"
                  />
                  <q-btn
                    unelevated
                    type="submit"
                    label="发布"
                    color="primary"
                    class="no-border-radius"
                    v-if="isEdit == '0'"
                    :loading="loginLoading"
                  />
                  <q-btn
                    unelevated
                    type="submit"
                    label="保存"
                    color="primary"
                    class="no-border-radius"
                     :loading="loginLoading"
                    v-else
                  />
                </div>
              </div>
            </q-card-section>
          </form>
        </q-card>



</template>